<template>
    <div>
        <div>
            <nav-bar title="卡包" :show-back="true"/>
        </div>
        <div style="margin-top:3%">
            <img src="../../img/card.png" class="head_icon_left">
            <span class="head_text_left">卡</span>
            <span class="head_text_right">绑定卡</span>
            <img src="../../img/next.png" class="head_icon_right">
        </div>
        <div>
            <div class="card_div">
                <img src="../../img/cardbg.jpg" class="card">
                <div class="card_text_head">学生卡</div>
                <div class="card_text_content">卡号:3115001487</div>
            </div>
        </div>
        <div style="margin-top:9%">
            <img src="../../img/ticket.png" class="head_icon_left">
            <span class="head_text_left">券</span>
            <span class="head_text_right">领取券</span>
            <img src="../../img/next.png" class="head_icon_right">
        </div>
        <div>
            <div class="card_div">
                <img src="../../img/ticketbg.jpg" class="card">
                <div class="card_text_head">优惠券</div>
                <div class="card_text_content">使用日期:2018-10-31至2018-11-28</div>
            </div>
        </div>
    </div>
</template>
<script>
import NavBar from '../../components/navbar/NavBar.vue'
export default {
    name: 'CardPackage',
    components: {
        NavBar
    }
}
</script>
<style scoped>
.head_icon_left{width: .5rem; height: .5rem; margin-left: 4%;}
.head_icon_right{width: .4rem; height: .4rem; position: relative; left: 62%; bottom: .03rem;}
.head_text_left{font-size: 130%; position: relative; bottom: .15rem; left: 2%;}
.head_text_right{font-size: 120%; position: relative; bottom: .15rem; left: 62%; color: rgba(0, 0, 0, 0.589)}
.card_div{height: 1.5rem; width: 90%; margin-left: 5%; margin-top: 2%;}
.card{height: 1.5rem; width: 100%; border-radius: .2rem;}
.card_text_head{position: relative; bottom: 1.3rem;left: 5%; color: #ffffff; font-size: 130%; font-weight: bold;}
.card_text_content{position: relative; bottom: 1.15rem; left: 5%;color: #ffffff;}
</style>
